<template>
  <div>
      <a-card>
          <a-table
            rowKey="fundcode"
            :columns="columns"
            :dataSource="jijinList"
            bordered
            >
            <a-tag :color="data | fmtRoleColor" slot="gszzl" slot-scope="data">
              {{data >0 ?'涨': '跌'}}
            </a-tag>
          </a-table>
      </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '基金代码',
    dataIndex: 'fundcode',
    width: '20%',
    key: 'fundcode',
    align: 'center'
  },
  {
    title: '基金名称',
    dataIndex: 'name',
    width: '20%',
    key: 'name',
    align: 'center'
  },
  {
    title: '基金涨幅',
    dataIndex: 'gszzl',
    width: '20%',
    key: 'gszzl',
    align: 'center',
    scopedSlots: { customRender: 'gszzl' }
  },
  {
    title: '涨幅日期',
    dataIndex: 'gztime',
    width: '20%',
    key: 'gztime',
    align: 'center'
  }
]
export default {
  filters: {
    fmtRoleColor (data) {
      console.log(data)
      if (data > 0) {
        return 'red'
      } else {
        return 'green'
      }
    }
  },
  data () {
    return {
      columns,
      jijinList: []
    }
  },
  created () {
    this.getjijinList()
  },
  methods: {
    async getjijinList () {
      const { data: res } = await this.$http.get('jijin')
      console.log(res.data)
      this.jijinList = res.data
    }
  }
}
</script>
